<template>
<view>
	<mainswiper :imageList="imageList"></mainswiper>
	<!-- icon 图标导航 -->
	<view class="header_icon">
	  <view>
	    <text class="iconfont icon_fs icon-xiuxiankafeiyule"></text>
	    <text class="icon_text">省心</text>
	  </view>
	  <view>
	    <text class="iconfont icon_fs icon-zuanshi"></text>
	    <text class="icon_text">品质</text>
	  </view>
	  <view>
	    <text class="iconfont icon_fs icon-mimayaochi"></text>
	    <text class="icon_text">私密</text>
	  </view>
	  <view>
	    <text class="iconfont icon_fs icon-huiyuanzhuanxiang"></text>
	    <text class="icon_text">专享</text>
	  </view>
	</view>
	<!-- 推荐导航栏 -->
	<view class="navigation"><text class="navigation_text">推荐</text><text class="iconfont icon-xia"></text></view>
	<!-- 渲染推荐 -->
	<view class="push" v-for="(item,index) in pushList" :key="item.productId" >
	  <view class="push_img">
	    <image :src="item.proPicUrl"> </image>
	    <text class="push_xin">
	      <text class="iconfont icon-shoucang2"></text>
	      <text>{{item.collectionNum}}</text>
	    </text>
	  </view>
	  <view class="push_text">
	    <view class="push_t14">{{item.proTitle}}</view>
	    <view class="push_bg"> <text class="iconfont push_ding icon-didian"></text>{{item.country}}</view>
	    <view class="push_nub">
	      <text class="push_sj"><text class="iconfont push_m icon-shijian"></text>{{item.routingDat}}天{{item.routingNigth}}晚</text>
	      <text class="push_sj"><text class="iconfont push_m icon-jiaqian"></text>{{item.amount}}元起</text>
	    </view>
	  </view>
	</view>
	<!-- 招募活动 -->
	<view class="activ">
	  <view class="activ_top">
	    <view class="activ_text">
	      <view class="activ_h2">招募活动</view>
	      <view class="activ_f12">旅途中，邂逅TA，邂逅世界的美</view>
	    </view>
	    <view class="activ_num"><text class="activ_f20">{{swiperIndex+1}}</text> / {{activList.length}}</view>
	  </view>
	  <view >
	    <swiper  autoplay="autoplay" interval="interval" duration="duration" circular="circular" previous-margin="30rpx" next-margin="20rpx" bindchange="changeSwiper" class="swiper_con1">
	      <block v-for="(item1,index) in activList" :key="item1.product_id" >
	        <swiper-item class="activ_swiper" >
	          <image :src="item1.pro_pic_url"></image>
	          <view class="activ_box">
	            <view class="activ_center">
	              <text class="center_text">{{item1.pro_title}}</text>
	              <view class="like_bg"> <text class="iconfont push_ding icon-didian"></text>{{item1.country}}</view>
	              <view class="center_rq">
	                <text>{{item1.out_time}}</text>
	              </view>
	            </view>
	            <view class="push_nub">
	              <text class="push_sj"><text class="iconfont push_m icon-shijian"></text>{{item1.routing_data}}天{{item1.routing_nigth}}晚</text>
	              <text class="push_sj"><text class="iconfont push_m icon-jiaqian"></text>{{item1.amount}}元起</text>
	            </view>
	          </view>
	        </swiper-item>
	      </block>
	    </swiper>
	  </view>
	</view>
	<!-- 宣传优点 -->
	<view class="good">
	  <text><text class="iconfont good_icon icon-shenqingchenggonggougouicon"></text>不用懂外语</text>
	  <text><text class="iconfont good_icon icon-shenqingchenggonggougouicon"></text>不用懂攻略</text>
	  <text><text class="iconfont good_icon icon-shenqingchenggonggougouicon"></text>没有购物坑</text>
	  <text><text class="iconfont good_icon icon-shenqingchenggonggougouicon"></text>不用折腾自己</text>
	</view>
	<!-- 猜你喜欢导航栏 -->
	<view class="navigation"><text class="navigation_text">猜你喜欢</text><text class="iconfont icon-xia"></text></view>
	<!-- 猜你喜欢渲染 -->
	<view class="like_item_box">
	  <view class="like_column">
	    <view class="like_item" v-for="(item,index) in likeList" :key="item.productId" >
	      <view class="like_item_img">
	        <image :src="item.proPicUrl"> </image>
	        <text class="push_xin">
	          <text class="iconfont icon-shoucang2"></text>
	          <text>{{item.collectionNum}}</text>
	        </text>
	      </view>
	      <view class="like_t12">{{item.proTitle}}</view>
	      <view class="like_bg"> <text class="iconfont push_ding icon-didian"></text>{{item.country}}</view>
	      <view class="push_nub">
	        <text class="push_sj"><text class="iconfont push_m icon-shijian"></text>{{item.routingDat}}天{{item.routingNigth}}晚</text>
	        <text class="push_sj"><text class="iconfont push_m icon-jiaqian"></text>{{item.amount}}元起</text>
	      </view>
	    </view>
	  </view>
	</view>
</view>
</template>

<script>
	//引入封装好的http
		import http from "@/utils/http.js";
		//引入轮播组件
		import mainswiper from '../../components/main/mainswiper.vue';
	export default {
		components:{
			mainswiper
		},
		data() {
			return {
				pushList: [], //推荐数据
				    likeList: [], //猜你喜欢数据
				    imageList: [], //轮播图数据
				    activList: [], //活动数据
				    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
				    indicatorDots: true, //轮播是否有小圆点
				    vertical: false, //false 横向   true 纵向
				    autoplay: true, //自动播放
				    interval: 2000, //动画时间
				    duration: 1000, //间隔时间
				    circular: true, //衔接动画  
				    swiperIndex: 0, //轮播图下标
			}
		},
		
		onLoad() {
			//轮播图数据
			    http.request('product/banner/getBySeller/4bc4027c645343f09a964b5c2e9f875b', '', 'get').then(res => {
			      
			        this.imageList= res.data
			      
			    }).catch(err => {
			      console.log(err);
			    })
				// 推荐数据
				    http.request('product/product/getProductRecommendUser', {
				      desc: false,
				      orderBy: "top",
				      pageNow: 1,
				      pageSize: 20,
				      seller_user_id: "4bc4027c645343f09a964b5c2e9f875b"
				    }, "post").then(res => {
				      
				        this.pushList = res.data
				     
				    }).catch(err => {
				      console.log(err);
				    })
				//招募活动数据
				    http.request('requirement/request/getMatchedProducts', {
				      desc: false,
				      orderBy: "outtime",
				      pageSize: 100,
				      product_type: 2
				    }, 'post').then(res => {
				      console.log(res);
				        this.activList = res.data.matchedProducts
				    }).catch(err => {
				      console.log(err);
				    })
			// 猜你喜欢数据
			    http.request('product/product/guessYouLike', '', 'get').then(res => {
			        this.likeList = res.data
			    }).catch(err => {
			      console.log(err);
			    })
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	/* pages/main/main.wxss */
	// @import "/templates/testem.wxss";
	
	
	/* 头部 icon */
	.header_icon {
	  display: flex;
	  justify-content: space-around;
	  padding: 19.5px 0;
	  background-color: #fff;
	  align-items: center;
	}
	
	.header_icon view {
	  display: flex;
	  flex-direction: column;
	  text-align: center;
	}
	
	.icon_fs {
	  font-size: 30px;
	  color: #ead1af;
	}
	
	.icon_text {
	  font-size: 12px;
	  color: #ead1af;
	  margin-top: 5px;
	}
	
	/* 导航栏 */
	.navigation {
	  width: 100%;
	  height: 48.5px;
	  background-color: #fff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border-bottom: 2px solid #d4d4d4;
	  margin-top: 8px;
	}
	
	.navigation_text {
	  color: #858585;
	  font-weight: 400;
	  margin-right: 5px;
	}
	
	/* 推荐渲染样式 */
	.push {
	  padding: 12px 5px;
	  border-bottom: 1px dashed #999999;
	  display: flex;
	  justify-content: space-around;
	  background-color: #fff;
	}
	
	.push_img {
	  width: 30%;
	  height: auto;
	  position: relative;
	}
	
	.push_img text {
	  color: #fff;
	}
	
	.push_xin {
	  position: absolute;
	  right: 5px;
	  font-size: 12px;
	  z-index: 1;
	  bottom: 5px;
	}
	
	.push_text {
	  width: 64%;
	  font-size: 12px;
	}
	
	.push_t14 {
	  font-size: 14px;
	  font-weight: 200;
	  margin-bottom: 5px;
	}
	
	.push_bg {
	  background-color: #e9e9e9;
	  display: inline-block;
	  padding: 2px 10px 2px 0;
	  border-radius: 5px;
	  margin-bottom: 9px;
	  margin-top: 5px;
	}
	
	.push_ding {
	  font-size: 12px;
	  color: #484848;
	  padding-right: 5px;
	}
	
	.push_nub text {
	  color: #858585;
	  font-size: 12px;
	}
	
	.push_sj {
	  padding: 0 8px;
	}
	
	.push_m {
	  padding-right: 5px;
	}
	
	/* 猜你喜欢渲染 */
	.like_item_box {
	  padding: 10px;
	  background-color: #fff;
	}
	
	.like_column {
	  flex-basis: 100%;
	  display: flex;
	  justify-content: space-between;
	  flex-flow: row wrap;
	}
	
	.like_item {
	  width: 47%;
	  border: 1px solid #f2f2f2;
	  margin: 10px 0;
	  background-color: #fff;
	  box-shadow: 5px 5px 0 #f2f2f2;
	}
	
	.like_item_img {
	  width: 88%;
	  position: relative;
	  height: 154rpx;
	}
	
	.like_item_img text {
	  color: #fff;
	}
	
	.like_t12 {
	  font-size: 12px;
	  text-align: right;
	}
	
	.like_bg {
	  font-size: 12px;
	  margin-left: 3px;
	  margin: 8px 0 8px 5px;
	  background-color: #e9e9e9;
	  display: inline-block;
	  padding: 2px 10px 2px 0;
	  border-radius: 5px;
	}
	
	/* 渲染优点 */
	.good {
	  padding: 33px 0;
	  background-color: #fff;
	  display: flex;
	  justify-content: space-around;
	}
	
	.good text {
	  font-size: 12px;
	  color: #333;
	}
	
	.good .good_icon {
	  font-size: 16px;
	}
	
	/* 招募活动 */
	.activ {
	  margin-top: 7px;
	  background-color: #fff;
	  width: 750rpx;
	}
	
	.activ_top {
	  padding: 20px 0;
	  margin: 0 33px;
	  display: flex;
	  justify-content: space-between;
	}
	
	.activ_h2 {
	  font-size: 24px;
	  font-weight: 400px;
	}
	
	.activ_f12 {
	  font-size: 14px;
	  color: #858585;
	}
	
	.activ_num {
	  font-size: 14px;
	}
	
	.activ_f20 {
	  font-size: 24px;
	}
	
	
	.activ_box{
	  border-bottom: 1px solid #858585;
	  padding-bottom: 29rpx;
	  width: 93%;
	  margin-left: 20rpx;
	}
	.swiper_con1 {
	  width: 750rpx;
	  height: 506rpx;
	}
	.activ_swiper image{
	  width: 98%;
	  height: 70%;
	}
	.activ_center {
	  display: flex;
	  position: relative;
	}
	
	.center_text {
	  font-size: 12px;
	  padding: 10px 0;
	  margin-right: 5px;
	}
	
	.center_rq {
	  background: url(http://www.51houniao.com/wx/customer/classic/images/zhaomu.png?v=78f89dc) no-repeat;
	  background-size: 100%;
	  position: absolute;
	  text-align: center;
	  transform: rotate(-15deg);
	  right: 10rpx;
	  width: 168rpx;
	  height: 64rpx;
	  line-height: 64rpx;
	}
	
	.center_rq text {
	  color: #33b3b4;
	  font-size: 12px;
	}
	/* 固定定位 */
	.search_btn {
	  position: fixed;
	  top: 10px;
	  left: 10px;
	  width: 80rpx;
	  height: 80rpx;
	  line-height:  80rpx;
	  text-align: center;
	  border-radius: 50%;
	  background: rgba(242,242,242,.95);
	}
	.small_icon {
	  display: inline-block;
	  background: url(http://www.51houniao.com/wx/customer/classic/images/icon_list.png) no-repeat;
	  width: 70rpx;
	  height: 70rpx;
	  background-size: 700rpx;
	  vertical-align: middle;
	  background-position: -175rpx -426rpx;
	}
</style>
